<template>
    <div class="app-container">
        <!-- 预约规则添加 -->
        <el-form label-width="120px">
          <el-form-item label="昵称">
              <el-input v-model="user.nickName"/>
          </el-form-item>
          <el-form-item label="手机号">
              <el-input v-model="user.phone"/>
          </el-form-item>
          <el-form-item label="用户姓名">
              <el-input v-model="user.name"/>
          </el-form-item>
          <el-form-item label="证件类型">
              <el-input v-model="user.certificatesType"/>
          </el-form-item>
          <el-form-item label="证件编号">
              <el-input v-model="user.certificatesNo"/>
          </el-form-item>
          <el-form-item label="证件路径">
              <el-input v-model="user.certificatesUrl"/>
          </el-form-item>
          <el-form-item label="挂号费">
              <el-input v-model="user.amount"/>
          </el-form-item>
          <el-form-item label="认证状态">
              <template>
                <el-radio v-model="authStatus" label="0">未认证</el-radio>
                <el-radio v-model="authStatus" label="1">认证中</el-radio>
                <el-radio v-model="authStatus" label="2">认证成功</el-radio>
                <el-radio v-model="authStatus" label="-1">认证失败</el-radio>
              </template>
          </el-form-item>
          <el-form-item label="状态">
              <template>
                <el-radio v-model="status" label="0">锁定</el-radio>
                <el-radio v-model="status" label="1">正常</el-radio>
              </template>
          </el-form-item>

          <el-form-item label="">
              <el-button type="primary" @click="saveOrUpdate">保存</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>
<script>
import userApi from '@/api/user'

export default {
    data() {
        return {
            user: {

            },
            authStatus: '0',
            status: '0'
        }
    },
    created() {//页面渲染之前执行
        if(this.$route.params && this.$route.params.id) {
            //获取路由中的id
            const id = this.$route.params.id
            //根据id查询信息
            this.findById(id)
        } else {
            //清空表单数据
            this.user = {}
        }
    },
    methods: {
        //添加
        save() {
            //此时是新增
            userApi.saveUserInfo(this.user)
            .then((response) => {
                //提示信息
                this.$message({
                    type: 'success',
                    message: '添加成功！'
                })
                //跳转到列表，使用路由跳转
                this.$router.push({path: '/user/list'})
            })
        },
        //修改
        update() {
            //此时是修改
            userApi.updateUserInfo(this.user)
            .then((response) => {
                //提示信息
                this.$message({
                    type: 'success',
                    message: '修改成功！'
                })
                //跳转到列表，使用路由跳转
                this.$router.push({path: '/user/list'})
            })
        },
        //添加方法
        saveOrUpdate() {
            // 赋值
            this.user.authStatus = this.authStatus
            this.user.status = this.status
            if(!this.user.id) {
                this.save()
            } else {
                this.update()
            }
        },
        //根据id查询数据
        findById(id) {
            userApi.findById(id)
            .then((response) => {
                this.user = response.data
                // 赋值
                this.authStatus = '' + this.user.authStatus
                this.status = '' + this.user.status
            })
        }
    }
}
</script>
